<template>
  
    <div class="quzi-container">  
       <div v-if="!isFinished">
         <div class="timer">
        <span>{{ remainingTime }}</span>
       </div>
        <div class="question">{{ currentQuestion }}</div>
        <div class="score">{{ currentScore }}分</div>
        <div class="options">
            
            <button v-for="(option,index) in currentOptions" :key="index"
            @click="selectAnswer(option)" :class="{selected:selectedAnswer===option}"
            class="btn"
            >
           {{ option }}
            </button>
        </div>
        
       </div>
       <div v-else class="result">
         <p><img src="../../../public/healhtool/tese.png" alt=""></p>
        <p><b>得分{{ score }}分</b></p>
        <div class="desc">
            您打败了{{accuracy}}%的的人，育儿水平初出茅庐，若能全面
       掌握育儿技能，他日定会变身最棒妈妈：
        </div>
         <div class="score-info">
            <p><span>答题准确率</span><span>{{accuracy}}%</span></p>
            <p><span>共计用时</span><span>{{ timeSpent }}秒</span></p>
        </div>
        <div class="btns">
         <p class="btn" @click="showWrongAnswers">查看错题解答</p>
        <p class="btn1" @click="resetQuiz">再测一次刷新成绩</p>
        </div>
       
       
       </div>

       <div v-if="showWrongAnswersFlag">
        <h3>错题</h3>
        <div v-for="(question,index) in showWrongAnswersList" :key="index">
            <p>{{ question.question }}</p>
            <p>正确答案:{{ question.correctAnswer}}</p>
            <p>你的答案:{{ question.selectedAnswer }}</p>
        </div>
    
       </div>
    </div>
  
</template>

<script setup lang="ts">

import { ref, reactive, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()

interface Question{
    question:string;
    option:string[];
    correctAnswer:string;
}
const questions:Question[]=[
    {
       question:'宝宝不停哭闹怎么办',
       option:['喂奶','换尿布','安抚','给他一巴掌'],
       correctAnswer:'安抚'
    },
    {
       question:'以下哪种方法是错误的拍嗝方法',
       option:['趴在肩上','面朝下趴在腿上','坐着','躺着'],
       correctAnswer:'趴在肩上'
    },
     {
       question:'宝宝什么都想自己做,妈妈应该',
       option:['告诉宝宝他不行','大声斥责','做一半留一半','完全帮宝宝做好'],
       correctAnswer:'做一半留一半'
    },
      {
       question:'父母应如何处理孩子之间的矛盾',
       option:['告诉孩子不能吃亏','告诉孩子忍一忍就好了','交给孩子化解冲突的方法','亲自去找对方家长'],
       correctAnswer:'交给孩子化解冲突的方法'
    },
     {
       question:'新生儿的胃和成人有所不同是横着长的',
       option:['是','否',],
       correctAnswer:'否'
    },
    {
       question:'糖会让孩子过分活跃吗',
       option:['是','否',],
       correctAnswer:'否'
    },
    {
       question:'下面哪种孩子是父母眼中的好孩子',
       option:['打不得','讲不听','爱发脾气','听话懂事'],
       correctAnswer:'听话懂事'
    },
    {
       question:'以下哪种食物能有效缓解便秘',
       option:['西梅汁','米饭','香蕉','面包'],
       correctAnswer:'西梅汁'
    },
    {
       question:'下列哪个不是宝宝的疲劳信号',
       option:['揉眼睛','拉耳朵','打哈欠','微笑'],
       correctAnswer:'微笑'
    },
      {
       question:'相比传统体温计，电子体温计会更加方便安全',
       option:['是','否',],
       correctAnswer:'是'
    },
    
];
//当前得分
const currentScore=computed(()=>
    score.value
);
const currentQuestionIndex = ref(0);
const selectedAnswer=ref('');
const remainingTime=ref(20);
const isFinished=ref(false);
//分数
const score=ref(0);
const currentQuestion=computed(()=>
    questions[currentQuestionIndex.value].question
);
const currentOptions=computed(()=>
    questions[currentQuestionIndex.value].option
)
 const startTimer=()=>{
    const timer=setInterval(()=>{
     remainingTime.value--;
     if(remainingTime.value===0){
        clearInterval(timer);
        currentOptions
        submitAnswer();
     }
    },2000)
 }


 const selectAnswer=(answer:string)=>{
    selectedAnswer.value=answer;
    if(answer===questions[currentQuestionIndex.value].correctAnswer){
        score.value+=150;
 }
 if(currentQuestionIndex.value<questions.length-1){
    currentQuestionIndex.value++;
        selectedAnswer.value = '';
        remainingTime.value = 20;
        startTimer();
 }
 else{
    isFinished.value=true;
 }
};
const submitAnswer=()=>{
    if(selectedAnswer.value===questions[currentQuestionIndex.value].correctAnswer){
        score.value++;
    }
    isFinished.value=true;
};
//查看错题

const showWrongAnswers=()=>{
    const wrongAnswers=questions.filter((q,i)=>q.correctAnswer!==selectedAnswer.value);
     wrongAnswers.forEach((q,i)=>{
        q.correctAnswer=questions[i].correctAnswer;
        console.log(q.question);

        // console.log(q.correctAnswer);
     })
    console.log(wrongAnswers);
   
}
const showWrongAnswersFlag=ref(false);

const showWrongAnswersList=()=>{
    showWrongAnswersFlag.value=true;
    showWrongAnswers();
}
// const backToHome=()=>{
//     router.push('/Parenting');
// }

//重新开始
const resetQuiz=()=>{
    currentQuestionIndex.value=0;
    selectedAnswer.value='';
    remainingTime.value=10;
    isFinished.value=false;
    score.value=0;
    startTimer();
    //返回第一道题目

// router.push('/Parenting');
}
//答题准确率
const accuracy=computed(()=>{
    return ((score.value/questions.length)).toFixed(2);
   
});
//答题用时
const timeSpent=computed(()=>{
   return 20-(remainingTime.value);
})


onMounted(()=>{
    startTimer();
})




</script>

<style scoped lang="scss"> 
  .quzi-container{
    width: 100%;
    height: 100%;
    background: #fff;
   .timer{
    width: 90px;
    height: 90px;
    border: 2px solid #ccc;
    border-radius: 50%;
    margin: 0 auto;
    margin-top: 25px;
    position: relative;
    span{
        position: absolute;
        top: 28px;
        left: 35px;
        font-size: 25px;

    }
   }
   .question{
    width: 100%;
    height: 20px;
      text-align: center;
        
    margin-top: 40px;
   }
   .score{
 
     width: 100%;
     height: 20px;
     text-align: center;
   }
   .options{
    width: 100%;
    height: 200px;
   
    button{
     width:200px;
     height: 40px;
     background: #ffbb51;
     margin: 0 auto;
     border: 0;
     margin-top: 20px;
     margin-left: 90px;
     text-align: center;
    }
    
   }
   .result{
     width: 100%;
     
    // background: skyblue;
     text-align: center;
     img{
        width: 100%;
        height: 200px;
     }
      .desc{
        width: 90%;
        height: 60px;
        line-height: 25px;
        margin-left: 18px;
        margin-top: 5px;
        // background: #f00;
     }
     .score-info{
        width: 90%;
        height: 80px;
        margin-top: 10%;
        margin-left: 15px;
        color: #787878;
        // background: #ffbb51;
        p{
            border-bottom: 1px solid #ffbb51;
            display: flex;
            justify-content: space-around;
            line-height: 50px;
            height: 40px;
        }
     }
     .btns{
        width: 100%;
        height: 200px;
        margin-top: 50px;
        .btn{
         width: 300px;
         height: 45px;
         background: #ffbb51;
         margin-left: 40px;
         border-radius: 20px;
         line-height: 45px;
        }
         .btn1{
         width: 300px;
         height: 45px;
         border: 1px solid #ffbb51;
         margin-left: 40px;
         border-radius: 20px;
         line-height: 45px;
         margin-top: 20px;
        }
     }
    

   }
  }
</style>